<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绝地求生数据展示</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<script src="js/jquery.min.js"></script>
	    <script src="js/bootstrap.min.js"></script>
	    <script src="js/echarts.min.js"></script>
	    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	    <link href="css/style2.css" rel="stylesheet" type="text/css" />
	    <link href="css/reset.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="css/achievement.css" type="text/css" />
		<style>
		  #loading{
			  display: none;
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  background: #333;
			  opacity: 0.7;
		  }
		</style>
	</head>
	<body>
		<div class="col">
			<p class="header">绝地求生数据展示</p>
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
			<div id="sixStart"></div>
			<p class="header second">战绩描述及建议:</p>
			<p id="describle">
				暂无数据！
			</p>
		</div>
		<div id="loading">dsadadsadsadsada</div>
	</body>
<script type="text/javascript">
		$(function(){
    $("#loading").ajaxStart(function(){
       $(this).show()
      });
      $("#loading").ajaxSuccess(function(){
        $(this).hide();
        // $(this).empty(); // 或者直接清除
      });
});
		  $.ajax({
            type: "get",//请求方式
            url: "/user/searchpubg",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
			success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
				console.log(result)
          var myChart = echarts.init(document.getElementById('sixStart')); 
	    	var option = {
	            title : {
					text: '玩家名称：'+'['+result[0]+']',
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            calculable : true,
	            polar : [
	                {
						name: { show: true, formatter: null,
							center:['50%','50%'],
							textStyle:{color:'#333'}
							},
	                    indicator : [
						    {text : '吃鸡率 '+result[1], max  : 100},   
							{text : '伤害 '+result[2], max  : 100},
							{text : '爆头率 '+result[3], max  : 100},
							{text : '车技 '+result[4], max  : 100},
	                        {text : '生存 '+result[5], max  : 100},    
	                    ],center : ['50%','50%'],
	                    radius : 100, //半径，可放大放小雷达图
                        splitLine : {
                            show : true,
                            lineStyle : {
                                width : 1,
                                color : '#333' // 图表背景网格线的颜色
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: false,
                            textStyle: {
                                color: '#247bd7' // 坐标轴刻度文字的样式
                            }
                        },
	                },
	            ],
	            series : [
	                {
	                    name:'',
	                    type: 'radar',//图表类型 radar为雷达图
	                    itemStyle: {
	                        normal: {
	                            lineStyle: {
	                                color :"#87cefa",
	                                width : 2,
	                                name : "sdaddsa"
	                            },
	                            areaStyle: {
	                                color:"#87cefa",
	                                type: 'default'
	                            }
	                        }
	                    },
	                    symbolSize :5,
	                    data : [{
	                        value:result,
	                    }]	
	                }
	            ]
	        };
           $(function(){
			myChart.setOption(option);
			
		})
        $("#describle").text(result[6][0].game_adjust+result[7][0].game_adjust+result[8][0].game_adjust+result[9][0].game_adjust+result[10][0].game_adjust)
			}
        });
		
	
	    
	     
	</script>

</html>	
